<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-button size="mini"  type="primary" class="handle-del mr10" @click="add">新增</el-button>
                <el-input size="mini"  v-model="keyword" placeholder="筛选名称" class="handle-input mr10"></el-input>
                <el-button size="mini"  type="primary" icon="search" @click="query">筛选</el-button>
            </div>
            <el-table style="width:100%" :data="tableData.records" border  :header-cell-style="{background:'#F5F7FA'}" ref="multipleTable" >
                <el-table-column type="index" label="序号" align="center" width="50"/>
                    <el-table-column prop="fdName" label="名称" sortable width="250"/>
                    <el-table-column prop="fdJobStatus" label="任务状态" sortable width="150">
                        <template slot-scope="scope">
                            <el-tag>{{scope.row.fdJobStatus}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fdJobGroup" label="任务组" sortable width="150"/>
                    <el-table-column prop="fdCronExpression" label="任务脚本" />
                    <el-table-column prop="fdBeanName" label="Bean名称" sortable width="150"/>
                <el-table-column label="操作" width="250" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini"  type="primary" @click="handleView(scope.row)">查看</el-button>
                        <el-button size="mini"  @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini"  type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" :page-size="tableData.size" layout="prev, pager, next" :total="tableData.total"/>
            </div>
        </div>
    </div>
</template>

<script>
import dateUtil from '@/utils/dateUtils';
export default {
    name: 'sysQuartzScheduleJobList',
    data() {
        return {
            tableData:{
                keyword: '',
                size:0,
                total:0,
                current:1,
                records: []
            },
            keyword: ''
        }
    },
    mounted() {
        this.getData();
    },
    activated() {
        this.getData();
    },
    methods: {
        add() {
            const params = {
                path: "/sys/job/sys_quartz_schedule_job/edit"
            }
            this.$common.openTag(params);
        },
        getData() {
            this.$post('/api/sys/job/sys_quartz_schedule_job/list',{
                keyword: this.tableData.keyword,
                current: this.tableData.current
            }).then((res) => {
                this.tableData = res.data;
            });
        },
        query(){
            this.tableData.keyword = this.keyword;
            this.getData();
        },
        dateFormat(obj,column){
            return dateUtil.format(obj.fdCreateTime);
        },
        handleEdit(row){
            let id = row.fdId;
            const params = {
                path: "/sys/job/sys_quartz_schedule_job/edit",
                query: {id:id}
            }
            this.$common.openTag(params);
        },
        handleView(row){
            let id = row.fdId;
            const params = {
                path: "/sys/job/sys_quartz_schedule_job/view",
                query: {id:id}
            }
            this.$common.openTag(params);
        },
        handleDelete(index,row){
            this.$confirm('此操作将删除该条记录,是否继续?').then(() => {
                this.$delete('/api/sys/job/sys_quartz_schedule_job',{
                    id:row.fdId
                }).then((res) => {
                    this.tableData.records.splice(index,1)
                    this.$message({type:'success',message:'删除成功!'})
                });
            })
        },
        handleCurrentChange(value){
            this.tableData.current = value;
            this.tableData.keyword = this.keyword;
            this.getData();
        }
    }
}
</script>

<style scoped>
 @import "~@/assets/css/list.css";
</style>
